<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
	.fl-left{float:left;}
	.fl-right{float:right;}
	.cl{clear:both; }
	.mrg-left-5{margin-left:5px;}
	.mrg-left-10{margin-left:10px;}
	.btn{width:80px;height:45px;border-radius:5px;background:red;color:white;border:none;cursor:pointer;}
	.btn:hover {font-size:15px;}
	
	.context{width:800px;height:600px;border:1px solid black;margin-top:0px;margin-left:250px;}
	
	
	.address{width:600px;margin-left:100px;}
	.ads-info{border-bottom:1px solid black;margin:10px 0px;}
	.ads-phone{border-bottom:1px solid black;margin:10px 0px;}
	.ads-reve{border-bottom:1px solid black;margin:10px 0px;}
	
	.product{width:600px;margin-left:100px;height:50px;line-height:87px;}
	.pro-name{width:100px;}
	.pro-info{width:200px;}
	.pro-img{width:50px;height:50px;overflow:hidden;}
	.pro-price{width:100px;}
	.pro-number{width:50px;}
</style>
</head>
<body>
	<div class="context">
		<form action="" id="formsub">
			<!-- 地址 -->
			<h3>收件人信息:</h3>
			<div class="address">
				<input type="hidden" name="adsId" id="adsId" value="" />
				<div class="ads-info" id="ads-info">
					北京市xxxxxxxx
				</div>
				<div class="ads-phone" id="ads-phone">
					18811431531
				</div>
				<div class="ads-reve" id="ads-reve">
					侯张波
				</div>
			</div>
			<h3>商品信息:</h3>
			<input type="hidden" name="proId" id="proId" value="${proId}" />
			<input type="hidden" name="productId" id="productId" value="" />
			<div class="product">
				<div class="pro-name fl-left" id="pro-name">xx商品</div>
				<div class="pro-info fl-left mrg-left-5" id="pro-info">商品真的很好啊</div>
				<div class="pro-img fl-left mrg-left-5"><img src="http://g.hiphotos.baidu.com/baike/w%3D268%3Bg%3D0/sign=eda026f334d12f2ece05a96677f9b25f/a8773912b31bb0516e55f40c347adab44aede0a5.jpg"></div>
				<div class="pro-price fl-left mrg-left-10" id="pro-price">18.00元</div>
				<div class="pro-number fl-left mrg-left-10" id="pro-number">X3</div>
			</div>
			<div class="cl"></div>
			<h3>订单信息:</h3>
			<div class="address">
				
				<div class="ads-info">
					金额：<input type="text" readonly style="border:none;font-size:15px;" name="orderPrice" id="orderPrice" value="54.00" />元
				</div>
				<div class="ads-phone">
					数量：X<input type="text" readonly style="border:none;font-size:15px;" name="orderNumber" id="orderNumber" value="3" />
				</div>
				<input type="button" id="sub" class="btn fl-right" value="提交订单" />
			</div>
			<div class="cl"></div>
		</form>
	</div>
	<script>
		$(function(){
			$.ajax({
				url:'order/initOrder',
				dataType:'json',
				data:{
					proId:$('#proId').val()
				},
				success:function(data){
					if('0000'==data.respCode){
						adsinit(data.returnObj.ads);
						proinit(data.returnObj.pro);
						orderinit(data.returnObj);
					}else{
						alert('加载失败');
					}
				 },
                error:function () {
                	alert('操作失败');
                }
			})
		})
		$('#sub').on('click',function(){
			var params = $('#formsub').serialize();
			console.log(params);
			$.ajax({
				url:'order/addOrder',
				data:params,
				dataType:'json',
				success:function(data){
					if('0000'==data.respCode){
						alert('提交成功')
						window.location.href=data.returnStr;
					}else{
						alert('提交失败');
					}
				 },
                error:function () {
                	alert('操作失败');
                }
			})
		})
		function adsinit(obj){
			initVal(0,'adsId',obj.id);
			initVal(1,'ads-info',obj.adsInfo);
			initVal(1,'ads-phone',obj.adsPhone);
			initVal(1,'ads-reve',obj.adsReve);
		}
		function proinit(obj){
			initVal(0,'productId',obj.id);
			initVal(1,'pro-name',obj.proName);
			initVal(1,'pro-info',obj.proDesc);
			initVal(1,'pro-price',obj.price+"元");
			initVal(1,'pro-number',obj.number);
		}
		function orderinit(obj){
			initVal(0,'orderPrice',obj.orderPrice);
			initVal(1,'orderNumber',obj.number);
		}
		function initVal(type,id,vals){
			if(0==type){
				document.getElementById(id).value=vals;
			}else if(1==type){
				document.getElementById(id).innerHTML=vals;
			}
		}
	</script>
</body>
</html>